<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 我的课题 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" class="handle-del mr10" @click="addproject()">创建课题 </el-button>
            </div>
            <el-table
                :data="projectTableData.filter((data) => !search || data.projectName.toLowerCase().includes(search.toLowerCase()))"
                :default-sort="{ prop: 'projectId', order: ' ascending' }"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column label="课题编号" sortable prop="projectId"> </el-table-column>
                <el-table-column label="课题名字" prop="projectName"></el-table-column>
                <el-table-column label="开始时间" sortable prop="startDate"> </el-table-column>
                <el-table-column label="结束时间" sortable prop="endDate" :formatter="endDataFormatter"></el-table-column>
                <el-table-column label="指导老师" prop="teacher.teacherName"> </el-table-column>
                <el-table-column label="小组" prop="team" :formatter="teamNameFormatter"> </el-table-column>
                <el-table-column align="center">
                    <template slot="header" slot-scope="scope">
                        <el-input v-model="search" size="mini" placeholder="输入组名搜索" />
                    </template>
                    <template slot-scope="scope" align="center">
                        <el-button type="text" @click="showDetails(scope.$index, scope.row)">查看详情</el-button>
                        <!-- <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)"
                            >删除</el-button
                        > -->
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--新建弹出框 -->
        <el-dialog title="新建课题" :visible.sync="addProjectDialog" width="40%">
            <el-form :rules="rules" :model="addProject" label-width="100px" ref="addProjectMessage">
                <el-form-item label="课题名字:" prop="projectName">
                    <el-col :span="13">
                        <el-input v-model="addProject.projectName"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="活动时间" prop="startDate">
                    <el-col :span="11">
                        <el-date-picker
                            type="datetime"
                            placeholder="选择日期"
                            v-model="addProject.startDate"
                            style="width: 100%"
                        ></el-date-picker>
                    </el-col>
                </el-form-item>

                <el-form-item label="结束时间" prop="endDate">
                    <el-col :span="11">
                        <el-date-picker
                            type="datetime"
                            placeholder="选择日期"
                            v-model="addProject.endDate"
                            style="width: 100%"
                        ></el-date-picker>
                    </el-col>
                </el-form-item>
                <!-- <el-form-item label="开始时间:" prop="startData">
                    <el-col :span="11">
                        <el-date-picker v-model="addProject.startDate" type="datetime" placeholder="选择日期时间"> </el-date-picker>
                    </el-col>
                </el-form-item>

                <el-form-item label="结束时间:" prop="endData">
                    <el-col :span="11">
                        <el-date-picker v-model="addProject.endDate" type="datetime" placeholder="选择日期时间"> </el-date-picker>
                    </el-col>
                </el-form-item>
                <span>{{ addProject.endDate }}</span> -->
                <el-form-item label="课题介绍:" prop="content">
                    <el-col :span="14">
                        <el-input type="textarea" v-model="addProject.content"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="resetForm()">取 消</el-button>
                <el-button type="primary" @click="createProject()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { fetchData } from '../../api/index';
export default {
    // name: 'basetable',
    data() {
        return {
            addProject: {
                projectName: '',
                startDate: '',
                endDate: '',
                content: '',
                teacherId: parseInt(localStorage.getItem('ms_number'))
            },
            addProjectDialog: false,
            number: localStorage.getItem('ms_number'),
            projectTableData: [],
            search: '',
            rules: {
                projectName: [
                    { required: true, message: '请输入课题名称', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                startDate: [{ type: 'date', required: true, message: '请选择开始时间', trigger: 'blur' }],
                endDate: [{ type: 'date', required: true, message: '请选择结束时间', trigger: 'blur' }],
                content: [{ required: true, message: '请填写内容', trigger: 'blur' }]
            }
        };
    },
    created() {
        //this.$http.this.getData();
        this.$http.get('http://localhost:9900/project/teacherProject?teacherId=' + this.number).then((res) => {
            this.projectTableData = res.data;
            console.log('发送的ID' + this.number);
            console.log(res.data);
        });
    },
    methods: {
        //取消按钮
        resetForm() {
            this.addProjectDialog = false;
            this.$refs.addProjectMessage.resetFields();
        },
        //创建课题
        addproject() {
            this.addProjectDialog = true;
        },
        //提交创建的课题
        createProject() {
            this.$refs.addProjectMessage.validate((valid) => {
                console.log(this.addProject);
                var b = new Date(this.addProject.startDate);
                var min = b.getMinutes() < 10 ? '0' + b.getMinutes() : b.getMinutes();
                var sec = b.getSeconds() < 10 ? '0' + b.getSeconds() : b.getSeconds();
                b = b.getFullYear() + '-' + (b.getMonth() + 1) + '-' + b.getDate() + ' ' + b.getHours() + ':' + min + ':' + sec;
                this.addProject.startDate = b;
                var c = new Date(this.addProject.endDate);
                var endMin = c.getMinutes() < 10 ? '0' + c.getMinutes() : c.getMinutes();
                var endSec = c.getSeconds() < 10 ? '0' + c.getSeconds() : c.getSeconds();
                c = c.getFullYear() + '-' + (c.getMonth() + 1) + '-' + c.getDate() + ' ' + c.getHours() + ':' + endMin + ':' + endSec;
                this.addProject.endDate = c;
                console.log(this.addProject.endDate);
                if (valid) {
                    this.$http.post('http://localhost:9900/project/addProject', this.addProject).then((res) => {
                        console.log(res);
                        this.addProjectDialog = false;
                        this.$refs.addProjectMessage.resetFields();
                        location.reload();
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //查看详情
        showDetails(index, row) {
            console.log(row);
            localStorage.setItem('projectMessage', row.projectId);
            console.log(row.projectId);
            this.$router.push('/myproject');
        },
        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$message.success('删除成功');
                    this.tableData.splice(index, 1);
                })
                .catch(() => {});
        },

        // 分页导航
        handlePageChange(currentPage) {
            this.query.pageIndex = currentPage;
            this.currentChangePage(this.pageList, currentPage);
        },
        //改变每页条数
        handleSizeChange(pageSize) {
            this.query.pageSize = pageSize;
            this.handleCurrentChange(this.query.pageIndex);
        },
        handleCurrentChange(currentPage) {
            this.query.pageIndex = currentPage;
            this.currentChangePage(this.pageList, currentPage);
        },
        //分页显示
        currentChangePage(list, currenPage) {
            let from = (currenPage - 1) * this.query.pageSize; //0
            let to = currenPage * this.query.pageSize; //5
            this.tableData = []; //[]
            for (; from < to; from++) {
                if (list[from]) {
                    this.tableData.push(list[from]);
                }
            }
        },
        //结束时间
        endDataFormatter(row, column, cellValue) {
            const endTime = new Date().getTime(); //现在时间
            if (new Date(cellValue).getTime() < endTime) {
                return cellValue + '(已过期)';
            } else {
                return cellValue;
            }
        },
        // //课题展示
        projectFormatter(row, column, cellValue) {
            if (cellValue == null) {
                return '';
            } else {
                return cellValue.projectName;
            }
        },
        //小组展示
        teamNameFormatter(row, column, cellValue) {
            if (cellValue == null) {
                return '(暂无)';
            } else {
                return cellValue.teamName;
            }
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
